import MultiColumn from './multi-column';
import GridCols from './grid';
import FlexBox from './flexBox';
import LazyBox from './LazyBox';
import { Button, Space } from 'antd';
import './index.less';
import { useState } from 'react';
const WaterfallFlow = () => {
  let [show, setShow] = useState('');
  // return <MultiColumn></MultiColumn>;
  return (
    <div className="aMain">
      <Space wrap>
        <Button
          type={show === 'MultiColumn' ? 'primary' : ''}
          onClick={() => setShow('MultiColumn')}
        >
          MultiColumn
        </Button>
        <Button
          type={show === 'GridCols' ? 'primary' : ''}
          onClick={() => setShow('GridCols')}
        >
          GridCols
        </Button>
        <Button
          type={show === 'FlexBox' ? 'primary' : ''}
          onClick={() => setShow('FlexBox')}
        >
          FlexBox
        </Button>
        <Button
          type={show === 'LazyBox' ? 'primary' : ''}
          onClick={() => setShow('LazyBox')}
        >
          LazyBox
        </Button>
      </Space>
      <div className="aContent">
        {show === 'MultiColumn' ? (
          <MultiColumn />
        ) : show === 'GridCols' ? (
          <GridCols />
        ) : show === 'FlexBox' ? (
          <FlexBox />
        ) : show === 'LazyBox' ? (
          <LazyBox />
        ) : (
          111
        )}
      </div>
    </div>
  );
};
export default WaterfallFlow;
